<template>
  <div>
    <h1>sonA</h1>
    <h1>{{ obj }}</h1>
    <button @click="changeProps">更改props传递过来的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "props修改",
      ObjNew: {},
    };
  },
  //   props: ["money", "str"],
  props: {
    money: {
      type: String,
    },
    str: {
      type: String,
      //   required: true, //是否必须传递
      default: "hanhan",
    },
    obj: {
      type: Object,
    },
  },
  created() {
    console.log(this.money);
    console.log(this);
  },
  methods: {
    changeProps() {
      console.log(this.money);
      //   this.money = "200万";
      //   this.info = "5541531";
      //   this.obj.name = "fuhao";
      /* this.obj = {
        name: "fuhao",
        height: 180,
      }; */
      this.ObjNew = this.obj;
      console.log(this.ObjNew);
      //   this.ObjNew = {}
    },
  },
};

/* 
父传子：在父组件中的值可以通过v-bind绑定到子组件标签上
就可以存到 $attrs 该属性当中
props接收 （props接收之后$attrs上就没有）
props接收完毕后该属性就作为组件对象上的属性存在

props接收数据的格式
props:['属性']
props：{
    type:  数据类型 String Object  Array ...
    required: 是否必须 true 必须传递  false 可传递可不传
    default:  默认值 传使用最新值 不传使用默认值
}
对象中的属性可写可不写  最少type


props传递给子组件的值属于单项数据流,不能更改
基本数据类型 只要改动就会报错
引用数据类型  更改某个属性值 不会

某些业务要求传递过来的props必须改

传递过来的值必须改
1.父组件传递过来的就是更新过后的值
2.当传递过来的值，需要更改 ，重新在data当中创建一个值，去接收 ，改动的时候该data中的值


*/
</script>

<style lang="scss" scoped>
</style>